<template>
    <div>
        <section
            class="content-header"
            id="aa"
        >
            <div class="title">事件工单
            </div>
        </section>
        <section style="display:none">
            <audio
                controls
                class="myaudio"
            >
                <source :src="require('_SYS/mp3/1.mp3')">
            </audio>
            <audio
                controls
                class="myaudio"
            >
                <source :src="require('_SYS/mp3/2.mp3')">
            </audio>
            <audio
                controls
                class="myaudio"
            >
                <source :src="require('_SYS/mp3/3.mp3')">
            </audio>
            <button
                type="submit"
                @click="voice()"
            >122</button>
        </section>

        <section class="content">
            <div class="find">
                <div class="clearfix">
                    <div class="col-md-2 clearfix">
                        <orderArea v-model="conditionEventData.eventArea" />
                    </div>
                    <div class="col-md-2 clearfix">
                        <orderType v-model="conditionEventData.eventSort" />
                    </div>
                    <div class="col-md-2 clearfix">
                        <orderOrigin v-model="conditionEventData.eventSource" />
                    </div>
                    <div class="col-md-2 clearfix">
                        <div class="form-group">
                            <label class="col-md-4 control-label">编号：</label>
                            <div class="col-md-8">
                                <input
                                    type="email"
                                    class="form-control"
                                    id="inputEmail3"
                                    placeholder="事件编号"
                                    v-model="conditionEventData.eventSerial"
                                >
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 clearfix">
                        <div class="form-group">
                            <label class="col-md-4 control-label">名称：</label>
                            <div class="col-md-8">
                                <input
                                    type="text"
                                    class="form-control"
                                    id="inputEmail3"
                                    placeholder="事件名称"
                                    v-model="conditionEventData.eventName"
                                >
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 clearfix">
                        <div class="form-group">
                            <label class="col-md-4 control-label">选择状态：</label>
                            <div class="col-md-8">
                                <select
                                    class="form-control select2"
                                    style="width: 100%;"
                                    v-model="conditionEventData.eventStatus"
                                >
                                    <option
                                        value=""
                                        disabled
                                        selected
                                        style='display:none;'
                                    >请选择</option>
                                    <option value="全部">全部</option>
                                    <option
                                        v-for="item in statusData"
                                        :key="item.value"
                                        :value="item.value"
                                    >{{item.name}}</option>

                                </select>
                            </div>
                        </div>
                    </div>
                    <!-- <button type="button" class="btn btn-primary" style="float:right" data-toggle="modal" data-target=".bs-example-modal-lg">导入</button> -->
                </div>
                <div class="clearfix">
                    <div class="col-md-2 clearfix">
                        <div class="form-group">
                            <label class="col-md-4 control-label">超时：</label>
                            <div class="col-md-8">
                                <select
                                    class="form-control select2"
                                    style="width: 100%;"
                                    v-model="conditionEventData.eventOvertime"
                                >
                                    <option
                                        value=""
                                        disabled
                                        selected
                                        style='display:none;'
                                    >请选择</option>
                                    <option value="全部">全部</option>
                                    <option value='0'>否</option>
                                    <option value='1'>是</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 clearfix">
                        <orderLimit v-model="conditionEventData.eventTimelimit  " />
                    </div>
                    <div class="col-md-6 clearfix">
                        <div class="form-group">
                            <label class="col-md-1 control-label">创建时间：</label>
                            <div class="col-md-4">
                                <input
                                    type="text"
                                    class="form-control pull-right"
                                    id="datepicker1"
                                    @mousedown="selectDate1"
                                    placeholder="YYYY-MM-DD"
                                    v-model="conditionEventData.eventTimeStart"
                                >
                            </div>
                            <span style="float:left;line-height:34px;">一</span>
                            <div class="col-md-4">
                                <input
                                    type="text"
                                    class="form-control pull-right"
                                    id="datepicker2"
                                    @mousedown="selectDate2"
                                    placeholder="YYYY-MM-DD"
                                    v-model="conditionEventData.eventTimeEnd"
                                >
                            </div>
                            <div class="col-md-1">
                                <button
                                    type="button"
                                    class="btn btn-primary"
                                    @click="$refs.page.getList(1)"
                                >查询</button>
                            </div>
                            <div class="col-md-1">
                                <button
                                    type="button"
                                    class="btn btn-primary"
                                    @click="reset"
                                >重置</button>
                            </div>
                        </div>
                    </div>
                    <div
                        class="col-md-2 clearfix"
                        style="padding:0"
                    >
                        <div class="form-group">
                            <div class="col-md-6">
                                <button
                                    type="button"
                                    class="btn btn-primary"
                                    @click="refresh"
                                >
                                    <i
                                        class="fa fa-refresh"
                                        :class="!bstop?'refresh':''"
                                        aria-hidden="true"
                                    ></i> 自动刷新({{sec}})</button>
                            </div>
                            <div class="col-md-6">
                                <span class="check-box">时间跟随
                                    <input
                                        id="followBox"
                                        type="checkbox"
                                        class="minimal"
                                        @change="followStatus=!followStatus;follow()"
                                        checked
                                    >
                                </span>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div
                class="row"
                style="margin:0 5px 15px 5px"
            >
                <router-link
                    to="listadd"
                    style="display:inline-block;margin-right:50px;"
                >
                    <button
                        type="button"
                        class="btn btn-primary"
                        @click="reset"
                    >
                        <i
                            class="fa fa-plus"
                            aria-hidden="true"
                        ></i>新建工单</button>
                </router-link>
                <button
                    type="button"
                    class="btn btn-primary"
                    data-toggle="modal"
                    data-target=".bs-example-modal-lg"
                >导入</button>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <!-- /.box-header -->
                        <div class="box-body">
                            <table
                                id="example2"
                                class="table table-bordered table-hover"
                                style="font-size:14px"
                            >
                                <thead>
                                    <tr>
                                        <th style="width:25%;">事件</th>
                                        <th style="width:15%;">创建时间</th>
                                        <th style="width:15%;">事件描述</th>
                                        <th style="width:10%;">片区</th>
                                        <th style="width:10%;">责任人</th>
                                        <th style="width:10%;">处理状态</th>
                                        <th style="width:15%;">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr
                                        v-for="item in selEventsData"
                                        :key="item.value"
                                    >
                                        <td style="position: relative;">
                                            <div class="tr-left"><img
                                                    :src="item.orderPhotopath && item.orderPhotopath.split(',')[0]"
                                                    alt="未添加图片"
                                                    @click="clickImg($event)"
                                                ></div>
                                            <div class="tr-right">
                                                <p class="ordername">事件名称：{{item.orderName}}</p>
                                                <p>编号：{{item.orderId}}</p>
                                                <p>事件类别：{{item.orderType}}</p>
                                            </div>
                                            <div
                                                class="line"
                                                :class="{success:item.orderStatus>0}"
                                            >
                                                <i
                                                    class="fa fa-check"
                                                    aria-hidden="true"
                                                ></i>
                                                <span
                                                    class="line-status"
                                                    :class="{success:item.orderStatus>0}"
                                                    v-if="item.orderStatus<=0"
                                                >{{status1[0]}}</span>
                                                <span
                                                    class="line-status"
                                                    :class="{success:item.orderStatus>0}"
                                                    v-if="item.orderStatus>0"
                                                >{{status2[0]}}</span>
                                            </div>
                                        </td>
                                        <td>{{item.orderCreatedate}}
                                            <div
                                                class="line"
                                                :class="{success:item.orderStatus>1}"
                                            >
                                                <i
                                                    class="fa fa-check"
                                                    aria-hidden="true"
                                                ></i>
                                                <span
                                                    class="line-status"
                                                    :class="{success:item.orderStatus>1}"
                                                    v-if="item.orderStatus<=1"
                                                >{{status1[1]}}</span>
                                                <span
                                                    class="line-status"
                                                    :class="{success:item.orderStatus>1}"
                                                    v-if="item.orderStatus>1"
                                                >{{status2[1]}}</span>
                                            </div>
                                        </td>
                                        <td>
                                            <p class="desc">{{item.orderDesc}}</p>
                                            <div
                                                class="line"
                                                :class="{success:item.orderStatus>2}"
                                            >
                                                <i
                                                    class="fa fa-check"
                                                    aria-hidden="true"
                                                ></i>
                                                <span
                                                    class="line-status"
                                                    :class="{success:item.orderStatus>2}"
                                                    v-if="item.orderStatus<=2"
                                                >{{status1[2]}}</span>
                                                <span
                                                    class="line-status"
                                                    :class="{success:item.orderStatus>2}"
                                                    v-if="item.orderStatus>2"
                                                >{{status2[2]}}</span>
                                            </div>
                                        </td>
                                        <td>{{item.orderArea}}
                                            <div
                                                class="line"
                                                :class="{success:item.orderStatus>3}"
                                            >
                                                <i
                                                    class="fa fa-check"
                                                    aria-hidden="true"
                                                ></i>
                                                <span
                                                    class="line-status"
                                                    :class="{success:item.orderStatus>3}"
                                                    v-if="item.orderStatus<=3"
                                                >{{status1[3]}}</span>
                                                <span
                                                    class="line-status"
                                                    :class="{success:item.orderStatus>3}"
                                                    v-if="item.orderStatus>3"
                                                >{{status2[3]}}</span>
                                            </div>
                                        </td>
                                        <td>{{item.sysPersonName}}
                                            <div
                                                class="line"
                                                :class="{success:item.orderStatus>4}"
                                            >
                                                <i
                                                    class="fa fa-check"
                                                    aria-hidden="true"
                                                ></i>
                                                <span
                                                    class="line-status"
                                                    :class="{success:item.orderStatus>4}"
                                                    v-if="item.orderStatus<=4"
                                                >{{status1[4]}}</span>
                                                <span
                                                    class="line-status"
                                                    :class="{success:item.orderStatus>4}"
                                                    v-if="item.orderStatus>4"
                                                >{{status2[4]}}</span>
                                            </div>
                                        </td>
                                        <td>{{statusData[item.orderStatus].name}}</td>
                                        <td>
                                            <router-link
                                                :to="{path:'details',query:{orderId:item.orderId}}"
                                                style="margin-right:20px"
                                            >查看</router-link>
                                            <router-link
                                                :to="{path:'details',query:{orderId:item.orderId,msg:2}}"
                                                style="margin-right:20px"
                                            >办理</router-link>
                                            <router-link
                                                :to="{path:'listUpdate',query:{orderId:item.orderId}}"
                                                style="margin-right:20px"
                                            >修改</router-link>
                                            <a
                                                style="cursor: pointer;"
                                                data-toggle="modal"
                                                data-target="#myModal"
                                                @click="getDeleteId(item.orderId)"
                                                v-if="item.orderStatus==0"
                                            >删除</a>
                                            <span v-else style="color:#cccccc">删除</span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <div
                                class="col-md-4 col-md-offset-7"
                                style="margin-top:50px;"
                            >
                                <ctrlPage
                                    :setPage="findConditionEvent"
                                    :type="type"
                                    ref="page"
                                />
                            </div>
                        </div>
                        <!-- /.box-body -->
                    </div>
                </div>
            </div>
        </section>
        <putin />
        <bigImg
            v-if="showImg"
            @clickit="viewImg"
            :imgSrc="imgSrc"
        />
        <div
            class="modal fade"
            id="myModal"
            tabindex="-1"
            role="dialog"
            aria-labelledby="myModalLabel"
        >
            <div
                class="modal-dialog"
                role="document"
            >
                <div class="modal-content">
                    <div class="modal-body">
                        <h4>确认删除？</h4>
                    </div>
                    <div class="modal-footer">
                        <button
                            type="button"
                            class="btn btn-primary"
                            data-dismiss="modal"
                            ref="close"
                            style="background:#3c8dbc"
                        >取消</button>
                        <button
                            type="button"
                            class="btn btn-primary"
                            style="background:#3c8dbc"
                            @click="deleteItem"
                        >确定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import putin from "@/components/ticket/PutIn.vue";
import ctrlPage from "@/components/common/ctrlPage.vue";
import orderArea from "@/components/common/orderArea.vue";
import orderType from "@/components/common/orderType.vue";
import orderOrigin from "@/components/common/orderOrigin.vue";
import orderLimit from "@/components/common/orderLimit.vue";
import bigImg from "@/components/common/bigImg.vue";

import utils from "@/utils";
export default {
    data() {
        let timer1 = null;
        let timer2 = null;
        let timer3 = null;
        let timer4 = null;
        return {
            type: "total, prev, pager, next, jumper",
            selEventsData: {},
            conditionEventData: {
                eventArea: "",
                eventSort: "",
                eventSource: "",
                eventSerial: '',
                eventName: '',
                eventStatus: '',
                eventOvertime: '',
                eventTimelimit: '',
                eventTimeStart: this.GetDateStr(-7),
                eventTimeEnd: this.GetDateStr(0),
                pageNum: null
            },
            total: "",
            statusData: [{ name: "" }, { name: "" }, { name: "" }, { name: "" }, { name: "" }, { name: "" }],
            limitData: [],
            bstop: true,
            followStatus: false,
            sec: 15,
            showImg: false,
            imgSrc: '',
            isVoice: false,
            status1: ['待热线派发', '待责任人确认', '待责任人处理', '待热线审核', '待热线回访'],
            status2: ['热线已派发', '责任人已确认', '责任人已处理', '热线已审核', '热线已回访'],
            deleteId: ""
        };
    },
    mounted() {
        this.$refs.page.getList(1);
        this.getSelOrderlimit();
        this.getSelOrderStatus();
        // this.follow();
        this.refresh()
        // this.GetDateStr(0)
    },
    methods: {
        getDeleteId(id) {
            this.deleteId = id
        },
        //删除工单
        deleteItem() {
            this.$api.ticket.list.delOrder({
                orderId: this.deleteId
            }).then(res => {
                if (res.success) {
                    this.$$message({
                        message: "恭喜您，删除成功！",
                        type: "success"
                    });
                    this.$refs.page.getList(this.$refs.page.pageIndex);
                    this.$refs.close.click()
                }
            });
        },
        clickImg(e) {
            this.showImg = true;
            // 获取当前图片地址
            this.imgSrc = e.currentTarget.src;
        },
        viewImg() {
            this.showImg = false;
        },

        //自动刷新
        refresh() {
            if (this.bstop) {
                document.getElementById("followBox").disabled = false;
                document.getElementById("followBox").checked = true;
                this.timer1 = setInterval(() => {
                    this.isVoice = true
                    this.$refs.page.getList(this.$refs.page.pageIndex);
                    this.$$message({
                        message: "自动刷新成功！",
                        type: "success"
                    });
                }, 15000);
                this.timer4 = setInterval(() => {
                    this.sec -= 1;
                    if (this.sec < 1) {
                        this.sec = 15
                    }
                    // console.log(this.followStatus)
                }, 1000)
                this.bstop = false;

                this.followStatus = true
                this.follow()

            } else {
                document.getElementById("followBox").disabled = true;
                document.getElementById("followBox").checked = false;
                // console.log(this.timer1)
                clearInterval(this.timer1);
                clearInterval(this.timer2);
                clearInterval(this.timer3);
                clearInterval(this.timer4);
                this.sec = 15
                this.bstop = true
                this.isVoice = false
                this.followStatus = false
            }
        },

        //时间跟随
        follow() {

            if (this.followStatus) {

                this.timer2 = setInterval(() => {
                    this.conditionEventData.eventTimeEnd = this.GetDateStr(0)
                }, 1000);
                this.timer3 = setInterval(() => {
                    this.conditionEventData.eventTimeStart = this.GetDateStr(-7)
                }, 1000);
            } else {
                clearInterval(this.timer2);
                clearInterval(this.timer3);
            }
        },
        GetDateStr(AddDayCount) {
            var dd = new Date();
            dd.setDate(dd.getDate() + AddDayCount);//获取AddDayCount天后的日期 
            var y = dd.getFullYear();
            var m = dd.getMonth() + 1;
            if (m < 10) m = "0" + m;
            var d = dd.getDate();
            let h = dd.getHours();
            if (h < 10) h = "0" + h;
            let i = dd.getMinutes();
            if (i < 10) i = "0" + i;
            let s = dd.getSeconds();
            if (s < 10) s = "0" + s;
            return y + "-" + m + "-" + d + " " + h + ":" + i + ":" + s;
        },
        reset() {
            console.log(this.$refs.page.pageIndex)
            this.conditionEventData.eventArea = "";
            this.conditionEventData.eventSort = "";
            this.conditionEventData.eventSource = "";
            this.conditionEventData.eventSerial = '';
            this.conditionEventData.eventName = '';
            this.conditionEventData.eventStatus = '';
            this.conditionEventData.eventOvertime = '';
            this.conditionEventData.eventTimelimit = '';
            this.conditionEventData.pageNum = null;
        },
        selectDate1() {
            $("#datepicker1")
                .datetimepicker({
                    autoclose: true,
                    format: "yyyy-mm-dd hh:ii:ss"
                })
                .on("changeDate", ev => {
                    this.conditionEventData.eventTimeStart = ev.target.value;
                });
        },
        selectDate2() {
            $("#datepicker2")
                .datetimepicker({
                    autoclose: true,
                    format: "yyyy-mm-dd hh:ii:ss"
                })
                .on("changeDate", ev => {
                    this.conditionEventData.eventTimeEnd = ev.target.value;
                });
        },
        handleSizeChange: function (size) {
            this.pagesize = size;
        },
        handleCurrentChange: function (currentPage) {
            this.currentPage = currentPage;
        },
        getSelOrderlimit() {
            this.$api.ticket.list.selOrderlimit().then(res => {
                if (res.success) {
                    // console.log(res);
                    this.limitData = res.data;
                }
            });
        },
        getSelOrderStatus() {
            this.$api.ticket.list.selOrderStatus().then(res => {
                if (res.success) {
                    // console.log(res);
                    this.statusData = res.data;
                }
            });
        },
        voice(level) {
            level--
            let myAuto = document.getElementsByClassName('myaudio');
            // console.log(level)

            myAuto[level].play();
            // for (var aa in myAuto) {
            // }
        },

        //获取列表
        findConditionEvent(pageIndex, rows, callback) {
            // console.log(this.conditionEventData);
            this.$api.ticket.list
                .conditionEvent({
                    pageNum: pageIndex || 1,
                    eventArea: this.conditionEventData.eventArea,
                    eventSort: this.conditionEventData.eventSort,
                    eventSource: this.conditionEventData.eventSource,
                    eventSerial: this.conditionEventData.eventSerial,
                    eventName: this.conditionEventData.eventName,
                    eventStatus: this.conditionEventData.eventStatus,
                    eventOvertime: this.conditionEventData.eventOvertime,
                    eventTimelimit: this.conditionEventData.eventTimelimit,
                    eventTimeStart: this.conditionEventData.eventTimeStart,
                    eventTimeEnd: this.conditionEventData.eventTimeEnd
                })
                .then(res => {
                    if (res.success) {
                        // console.log(this.isVoice)
                        if (!!this.isVoice) {
                            if (this.total != '') {
                                // console.log(this.total, res.data.total)
                                if (this.total != res.data.total) {
                                    // console.log('aaaaaaaaaaaa')
                                    let i = res.data.total - this.total;
                                    var level = 0;
                                    for (let j = 0; j <= i; j++) {
                                        if (res.data.list[j].orderLevel > level) {
                                            level = res.data.list[j].orderLevel
                                        }
                                    }
                                    // console.log(level)
                                    this.voice(level)
                                }
                            }
                        }

                        this.selEventsData = res.data.list;
                        this.total = res.data.total;
                        this.isVoice = false

                        // console.log(res);
                        // this.voice()
                        // console.log(this.total)
                        callback(this.selEventsData, this.total);

                    }
                });
        }
    },
    components: {
        putin,
        orderArea,
        ctrlPage,
        orderType,
        orderOrigin,
        orderLimit,
        bigImg
    },
    beforeDestroy() {
        this.bstop = false
        clearInterval(this.timer1);
        clearInterval(this.timer2);
        clearInterval(this.timer3);
        clearInterval(this.timer4);
        this.timer1 = null;
        this.timer2 = null;
        this.timer3 = null;
        this.timer4 = null;
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.content-header {
    .title {
        font-weight: bolder;
        height: 20px;
        line-height: 20px;
    }
    .addlist {
        float: right;
    }
}
.content {
    .find {
        background: #fff;
        border: 1px solid #bbb;
        padding: 20px 10px 10px 0;
        border-radius: 10px;
        margin-bottom: 15px;
    }
    input,
    select,
    textarea {
        border-radius: 5px;
    }
    .btn-primary {
        margin-right: 5%;
    }
    div {
        margin-bottom: 5px;
    }
    .control-label {
        padding: 0px;
        line-height: 34px;
    }
    .check-box {
        white-space: nowrap;
        line-height: 34px;
        input {
            width: 16px;
            height: 16px;
        }
    }
    table {
        text-align: center;
        .ordername {
            width: 250px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .desc {
            width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        th {
            text-align: center;
        }
        td {
            vertical-align: middle;
            padding: 20px 20px 40px 20px;
            position: relative;
        }
        .tr-left {
            float: left;
            margin-right: 20px;
            img {
                width: 75px;
                height: 75px;
            }
        }
        .tr-right {
            float: left;
            p {
                line-height: 25px;
                margin: 0;
                text-align: left;
            }
        }
        .line {
            width: 100%;
            height: 6px;
            background: #cccccc;
            float: left;
            border-radius: 5px;
            position: absolute;
            bottom: 25px;
            left: 0px;
        }
        .success {
            display: inline-block !important;
            background: #3c8dbc;
            i {
                background: #3c8dbc;
            }
            span {
                color: #3c8dbc;
            }
        }
        .line-status {
            //   display: none;
            display: inline-block;
            width: 100%;
            margin-top: 15px;
            text-align: center;
            color: #cccccc;
            background: #fff !important;
            font-weight: bold;
        }
        i {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #cccccc;
            line-height: 24px;
            color: white;
            position: absolute;
            top: -9px;
            left: 50%;
            margin-left: -11px;
        }
    }
}
.refresh {
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 1s;
    -webkit-animation: rotate 3s linear infinite;
    -moz-animation: rotate 3s linear infinite;
    -o-animation: rotate 3s linear infinite;
    animation: rotate 3s linear infinite;
}
@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}
@-moz-keyframes rotate {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(359deg);
    }
}
@-o-keyframes rotate {
    from {
        -o-transform: rotate(0deg);
    }
    to {
        -o-transform: rotate(359deg);
    }
}
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}
</style>

